/**
 * 2018/05/09 by xiongisxiong edited on 5/13
 */
import React, { PureComponent } from 'react'
import { View, Text, StyleSheet, TouchableOpacity, FlatList } from 'react-native'

// 引入组件
import PlaylistHeader from './PlaylistHeader'
import ListContainer from './ListContainer'

import { screen, color } from '../utils'
import { PLAYLIST_HIGHQUALITY } from '../api'
import { TextTool } from '../widgets'

const { Normal } = TextTool

export default class PlaylistScene extends PureComponent{
  constructor(props){
    super(props);
    this.state = {
      dataList:[
        {
          type: 'mv',
          title: '推荐MV',
          data: [],
        }        
      ],
      headerData: {},
      refreshing: true,
    }
  }
  componentDidMount() {
    this.requestData(21)
  }
  requestData = (limit = 20) => {
    try{
      (
        async () => {
          const datas = [];
          // 根据type 选择点击跳转进入的何种详细页
          const res = await fetch(`${PLAYLIST_HIGHQUALITY}?limit=${limit}`)
          const playlist_highquality = await res.json();
          console.log('精品歌单接口返回内容：', playlist_highquality)
          datas.push({
            type: 'playlist',
            title: '精品歌单',
            data: playlist_highquality.playlists.filter((v, i) => i > 0).map((item, index) => ({
              ...item,
              title: item.name,
              picUrl: item.coverImgUrl + '?param=240y140', // 这里加入param后图片会变得模糊，但上下滚动也更流畅
              width: 0.49
            }))
          })

          this.setState({
            dataList: datas,// 此处也可以写成 [...datas]
            refreshing: false,
            headerData: playlist_highquality.playlists[0]
          })
        }
      )()
    }catch(err){
      console.log('err', err)
    }
  }
  // 渲染歌单中列表的头部
  renderHeader = () => (
    <View style={{flex: 1}}>
      <PlaylistHeader data={this.state.headerData} />
      <View style={styles.headerMenu}>
        <TouchableOpacity style={styles.allBtn}>
          <Text>全部歌单 ></Text>
        </TouchableOpacity>
        <View style={{flex: 1}} />
        <View style={{flexDirection: 'row'}}>
          <Normal title='欧美' />
          <Normal title='华语' style={{marginLeft: 15}} />
          <Normal title='嘻哈' style={{marginLeft: 15}} />
        </View>
      </View>
    </View>
  )
  // 渲染歌单中列表的网格
  renderItem = ({item, index}) => (
    <ListContainer dataList={item.data} title={item.title} navigation={this.props.navigation}/>
  )
  render() {
    const { dataList, refreshing } = this.state
    return (
      // <View>
      //   <Text>
      //     歌单歌单歌单歌单歌单歌单
      //   </Text>
      // </View>
      <FlatList 
        style={{backgroundColor: '#fff'}}
        data={dataList}
        refreshing={refreshing}
        onRefresh={this.requestData}// 发现此处函数不能加()
        keyExtractor={(item, index) => index}
        ListHeaderComponent={this.renderHeader}
        ListFooterComponent={() => (<Text style={{textAlign: 'center', padding: 10, transform: [{scale: 0.857143}]}}>已加载完全部数据</Text>)}
        renderItem={this.renderItem}
      />
    )
  }
}

const styles = StyleSheet.create({
  headerMenu: {
      height: screen.width / 7,
      width: screen.width,
      flexDirection: 'row',
      alignItems: 'center',
      paddingTop: 10,
      paddingLeft: 7,
      paddingRight: 7
  },
  allBtn: {
      width: 100,
      height: 30,
      borderWidth: screen.onePixel,
      borderColor: color.border,
      borderRadius: 40,
      justifyContent: 'center',
      alignItems: 'center'
  }
});